<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    
</head>

<body>
    
    <div id="result">

    </div>
    <script>
        // console.log(document.documentElement.clientWidth);
        //获取元素
        // let result = document.getElementById('result');
        setInterval(() => {
            result.innerHTML = `当前布局视口的宽度: ${document.documentElement.clientWidth} <br>
                            当前布局视口的高度: ${document.documentElement.clientHeight}<br>`;

            //设置
            result.innerHTML += `当前视觉视口的宽度: ${window.visualViewport.width} <br>
                           当前视觉视口的高度: ${window.visualViewport.height}`;
            //设置
            // result.innerHTML += `当前视觉视口的宽度: ${window.innerWidth} <br>
            //                当前视觉视口的高度: ${window.innerWidth}`;
        }, 50)
    </script>
</body>

</html>